<template>
  <div v-show="menuShow" class="contextmenu" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
    <ul @mouseup="handleMouseUp">
      <template v-if="curComponent">
        <template v-if="!curComponent.isLock">
          <li @click="copy">复制</li>
          <li @click="paste">粘贴</li>
          <!-- <li @click="cut">剪切</li>
          <li @click="lock">锁定</li> -->
          <li @click="handleDeleteComponent">删除</li>
          <li @click="topComponent">置顶</li>
          <li @click="bottomComponent">置底</li>
          <li @click="upComponent">上移</li>
          <li @click="downComponent">下移</li>
        </template>
        <!-- <li v-else @click="unlock">解锁</li> -->
      </template>
      <li v-else @click="paste">粘贴</li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { useComponent, useContextMenu, useLayer, useCopy } from "@visual/stores";
import { storeToRefs } from "pinia";

const contextMenuStore = useContextMenu();
const { menuShow, menuTop, menuLeft } = storeToRefs(contextMenuStore);
const componentStore = useComponent();
const { curComponent } = storeToRefs(componentStore);
const copyStroe = useCopy();
const { copy: copyFun, paste: paseFun } = copyStroe;
const { topComponent, bottomComponent, upComponent, downComponent } = useLayer();

// 点击菜单时不取消当前组件的选中状态
function handleMouseUp() {
  componentStore.setClickComponentStatus(true);
}

function handleDeleteComponent() {
  componentStore.deleteComponent();
}

function paste() {
  paseFun(true);
}
function copy() {
  copyFun();
}
</script>
<style lang="scss">
.contextmenu {
  position: absolute;
  z-index: 1000;

  ul {
    box-sizing: border-box;
    padding: 6px 0;
    margin: 5px 0;
    background-color: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    li {
      position: relative;
      box-sizing: border-box;
      height: 34px;
      padding: 0 20px;
      overflow: hidden;
      font-size: 14px;
      line-height: 34px;
      color: #606266;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
